<template>
  <div class="flex column module-inner">
    <div class="module-title">
      <img alt="" src="/image/download-5.png">
      客户行业分布
    </div>
    <div id="container-customerDistribution" ref="container" class="content common-module-bg"/>
  </div>
</template>

<script>
import * as echarts from 'echarts';


export default {
  name: 'CustomerDistribution',
  components: {},
  props: {
    moduleData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      charts: null
    }
  },
  watch: {
    'moduleData.length'() {
      this.init()
    }
  },
  beforeDestroy() {
    echarts.dispose(this.charts)
    this.charts = null
  },
  mounted() {
    // this.init()
  },
  methods: {
    init() {
      const chartData = this.moduleData.reduce(
        (cur, item) => {
          return {
            industry: [...cur.industry, item.industry],
            count: [...cur.count, item.count]
          }
        },
        {
          industry: [],
          count: []
        }
      )
      const options = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            show: false
          }
        },
        legend: {
          show: false
        },
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          top: this.$fontSize(0.2),
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: chartData.industry,
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              interval: 'auto',
              rotate: 50,
              textStyle: {
                color: '#fff',
                fontSize: this.$fontSize(0.1)
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }

          }
        ],
        yAxis: [
          {
            type: 'value',
            name: 'Precipitation',
            show: false
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            data: chartData.count,
            itemStyle: {
              color: echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: 'rgb(141, 225, 155)'},
                {offset: 1, color: 'rgb(98, 166, 239)'}
              ])
            },
            emphasis: {
              itemStyle: {
                borderWidth: 2,
                borderColor: '#fff'
              }
            },
            barWidth: this.$fontSize(0.4)
          }
        ]
      }
      this.charts = echarts.init(
        this.$refs.container,
        null,
        {
          renderer: 'svg'
        }
      )
      // this.charts.showLoading({
      //   text: '',
      //   color: 'rgb(79, 142, 195)',
      //   textColor: '#000',
      //   maskColor: 'rgba(255, 255, 255, 0)',
      //   zlevel: 10
      // })
      this.charts.setOption(options, true)
      this.charts = {
        resize: this.charts.resize
      }
      // setTimeout(() => {
      //   this.charts.hideLoading()
      // }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "src/styles/conversion.scss";

.module-inner {
  height: 100%;
}

.content {
  flex: 230;
}
</style>
